<%--
  Created by IntelliJ IDEA.
  User: WanMing
  Date: 2019/2/10
  Time: 20:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>业务管理</title>
    <link rel="stylesheet" href="${ctx}/resources/layui/css/layui.css" media="all">
    <script type="text/javascript" src="${ctx}/resources/js/jquery.js"></script>
    <script type="text/javascript" src="${ctx}/resources/layui/layui.js"></script>
</head>
<body>
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">收费细项</div>
                <div class="layui-card-body">

                    <form class="layui-form" action="" id="formCharge">

                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">收费项目:</label>
                                <div class="layui-input-inline">

                                    <select name="chargeCode" id="chargeSelect">


                                    </select>

                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">收费金额:</label>
                            <div class="layui-input-block">
                                <input type="number" name="charge" lay-verify="title" autocomplete="off"
                                       placeholder="请选择收费项目" class="layui-input">
                            </div>
                        </div>


                    </form>

                    <%--注意此处的按钮应该放在表单外面，防止两次表单提交的影响--%>
                    <div class="layui-form-item">
                        <div class="layui-input-block" style="text-align: center">
                            <button class="layui-btn" id="butSubmit">修改收费金额</button>
                            <button type="reset" class="layui-btn layui-btn-primary" id="resetOperator">全部重写</button>
                        </div>
                    </div>


                </div>
            </div>
        </div>

        <div class="layui-col-md12" style="height: 80px">
            <div class="layui-card">
                <div class="layui-card-header">业务收费</div>
                <div class="layui-card-body">

                    <form class="layui-form" action="" id="formRule">
                        <input type="hidden" name="funcName" value="" id="funcName">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">业务:</label>
                                <div class="layui-input-inline">
                                    <select name="funcId" id="chargeRuleSelect">



                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">收费项目:</label>
                            <div class="layui-input-block" id="checkCharge">

                            </div>
                        </div>


                    </form>

                    <%--注意此处的按钮应该放在表单外面，防止两次表单提交的影响--%>
                    <div class="layui-form-item">
                        <div class="layui-input-block" style="text-align: center">
                            <button class="layui-btn" id="ruleSubmit">提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary" id="resetRule">全部重写</button>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
</div>

<script>




    layui.use(['layer', 'jquery','form'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;


        //异步加载表单charge数据
        $.post('${ctx}/charge/loadAllCharge.action',function (result) {

            var chargeSelect=$("#chargeSelect");
            var chargeCheck=$("#checkCharge");
            $.each(result,function(index,data) {
                console.log(data);
                //加载收费项
                var chargeOption = $("<option value='" + data.chargeCode + "'>" + data.chargeName + "</option>");
                chargeSelect.append(chargeOption);
                //加载收费项
                var checkInput = $("<input type='checkbox' name='chargeCode' title='"+data.chargeName+"' lay-skin='primary' value='"+data.chargeCode+"'>");
                chargeCheck.append(checkInput);
            });

            //渲染
            form.render()



        },'json');

        //异步加载表单chargeRule数据
        var distinctName = '';
        $.post('${ctx}/chargeRule/loadAllChargeRule.action',function (result) {
            var chargeRuleSelect=$("#chargeRuleSelect");
            //加载业务项
            $.each(result,function(index,data) {

                //去除重复的业务
                if(distinctName==data.funcId){
                    return true;
                }
                distinctName = data.funcId;
                console.log(data);
                var chargeRuleOption = $("<option value='" + data.funcId + "'>" + data.funcName + "</option>");
                chargeRuleSelect.append(chargeRuleOption);
            });

            //选中收费项
            $.each(result,function(index,data) {
                var checkCharge = $("#checkCharge>input");
                var length = checkCharge.length;
                for(i=0;i<length;i++){
                    if(checkCharge[i].value==data.chargeCode){
                        checkCharge[i].checked=true;
                        return true;
                    }
                }
            });

            //渲染
            form.render()


        },'json');




        //提交修改费用的表单
        $("#butSubmit").click(function () {

            $.ajax({
                url: "${ctx}/charge/updateCharge.action",
                type: "post",
                data: $("#formCharge").serialize(),
                dataType: "JSON",
                success: function (result) {

                    if (result.code == 1) {
                        //回调成功信息
                        layer.msg(result.msg, {icon: 1});
                        console.log("添加成功");
                    }else {
                        //回调失败信息
                        layer.msg(result.msg, {icon: 2});
                    }
                },
                error: function (xhr, text) {
                    console.log(text);
                },
                complete: function (xhr, text) {


                }
            });
        });

        //提交业务项目的表单
        $("#ruleSubmit").click(function () {
            var text = $("#chargeRuleSelect").text();
            $("#funcName").val(text);


            $.ajax({
                url: "${ctx}/chargeRule/updateChargeRule.action",
                type: "post",
                data: $("#formRule").serialize(),
                dataType: "JSON",
                success: function (obj) {
                    if (obj.code == 1) {
                        //回调成功信息
                        layer.msg(obj.msg, {icon: 1});
                        console.log("添加成功");
                    }else {
                        //回调失败信息
                        layer.msg(obj.msg, {icon: 2});
                    }
                },
                error: function (xhr, text) {
                    console.log(text);
                },
                complete: function (xhr, text) {


                }
            });
        });



    });





</script>
</body>
</html>
